<template>
    <ContentBase>
        <div class="invoice-photo">
            <img :src="current_record.invoicePhoto" class="img-fluid rounded shadow-sm">
        </div>

        <div class="invoice-details">
            <h3>发票详情</h3>

            <div class="detail-item" v-for="(value, key) in filteredRecord" :key="key">
                <span class="label">{{ formatLabel(key) }}：</span>
                <span class="value">
                    <template v-if="Array.isArray(value)">
                        <!-- 如果是数组，按行显示每个元素的 word 属性 -->
                        <div v-for="(item, index) in value" :key="index">
                            {{ item.word }}
                        </div>
                    </template>
                    <template v-else>
                        <!-- 如果不是数组，正常显示 -->
                        {{ formatValue(value) }}
                    </template>
                </span>
            </div>
        </div>
    </ContentBase>
</template>

<script setup>
import ContentBase from '@/components/ContentBase.vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { ref } from 'vue';
import { computed } from 'vue';

const route = useRoute();
const store = useStore();
const id = route.params.id;
const records = store.state.user.records;
const current_record = ref(null);

for (let record of records) {
    if (record.id == id) {
        current_record.value = record;
        break;
    }
}

// 过滤掉不需要显示的字段（id, userId, invoicePhoto）
const filteredRecord = computed(() => {
    // eslint-disable-next-line
    const { id, userId, invoicePhoto, ...filtered } = current_record.value;
    for (const key in filtered) {
        if (Array.isArray(filtered[key]) && filtered[key].length === 0) {
            filtered[key] = '无'; // 如果是空数组则显示 '无'
        }
    }
    return filtered;
});

// 格式化字段标签
const formatLabel = (key) => {
    const labels = {
        invoiceNum: '发票号码',
        invoiceType: '发票类型',
        invoiceDate: '开票日期',
        totalAmount: '总金额',
        amountInWords: '金额大写',
        commodityName: '商品名称',
        sellerName: '卖方名称',
        sellerBank: '卖方银行',
        sellerAddress: '卖方地址',
        purchaserName: '买方名称',
        purchaserBank: '买方银行',
        purchaserAddress: '买方地址',
        remarks: '备注',
        invoiceCode: '发票代码',
        totalTax: '税额',
        serviceType: '服务类型',
        sheetNum: '发票联次',
        agent: '是否代理',
        checkCode: '校验码',
        checker: '复核人',
        invoiceTag: '发票标签',
        password: '密码',
        city: '城市',
        commodityNum: '商品数量',
        commodityUnit: '商品单位',
        commodityTax: '商品税额',
        commodityTaxRate: '商品税率',
        commodityAmount: '商品金额',
        commodityPrice: '商品单价',
        commodityPlateNum: '商品车牌号',
        commodityStartDate: '商品开始日期',
        commodityEndDate: '商品结束日期',
        machineCode: '机器编码',
        purchaserRegisterNum: '买方注册号',
        sellerRegisterNum: '卖方注册号',
        invoiceNumDigit: '发票号码数字',
        invoiceTypeOrg: '发票类型（机构）',
        invoiceCodeConfirm: '发票代码确认',
        invoiceNumConfirm: '发票号码确认',
        amountInFiguers: '数字金额',
        createtime: "上传发票时间",
        commodityType: "商品类型",
        noteDrawer: "票据出纳人",
        province: "省份",
        onlinePay: "在线支付",
        commodityVehicleType: "商品运输车辆类型",
        payee: "收款人"
    };
    return labels[key] || key;
};

// 格式化值
const formatValue = (value) => {
  return value || '无'; // 为空时返回 '无'
};

</script>

<style scoped>

.invoice-photo {
    display: flex;
    flex-direction: column;  /* 使图片和文本上下排列 */
    justify-content: center;
    align-items: center;  /* 水平居中对齐 */
    width: 100%;
    height: 50vh;
}

.invoice-photo>img {
    height: 90%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.invoice-details {
    margin-top: 20px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.detail-item {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 确保键和值的顶部对齐 */
    font-size: 1rem;
    padding-bottom: 10px; /* 每项增加下边距 */
    border-bottom: 1px solid #ddd; /* 添加分隔线 */
}

.label {
    font-weight: bold;
    color: #333;
    flex-basis: 20%; /* 键的宽度固定，占 20% */
    flex-shrink: 0; /* 防止键的宽度被压缩 */
    text-align: left; /* 键左对齐 */
    padding-right: 10px; /* 增加与值的间距 */
    word-wrap: break-word; /* 允许换行 */
    word-break: break-word;
}

.value {
    color: #555;
    flex-basis: 80%; /* 值占用剩余空间 */
    word-wrap: break-word; /* 长内容自动换行 */
    word-break: break-word; /* 防止超长内容溢出 */
    text-align: right; /* 值左对齐 */
}

</style>